<extend name="Public:innerbase"/>
<block name="css">
<link type="text/css" rel="stylesheet" href="{:STATICS}/daterangepicker/daterangepicker-bs3.css" />
<style>
.bs-callout {
	padding: 20px;
	margin: 20px 0;
	border: 1px solid rgb(238, 238, 238);
	border-left-width: 5px;
	border-radius: 3px;
}
.bs-callout-info {
	border-left-color: rgb(91, 192, 222);
}
</style>
</block>
<block name="content">
<div class="page-header">
	<a class="btn btn-sm btn-default" href="{:U('Guess/index')}"><i class="fa fa-chevron-left"></i>&nbsp;返回</a>
</div>

<div class="container">
	<div>
		<div class="btn-toolbar" role="toolbar">
			<div class="btn-group btn-group-sm">
				<button id="7days" name="7" type="button" class="btn <?php echo $range==7?'btn-success':'btn-default';?>">最近7天</button>
				<button id="15days" name="15" type="button" class="btn <?php echo $range==15?'btn-success':'btn-default';?>">最近15天</button>
				<button id="30days" name="30" type="button" class="btn <?php echo $range==30?'btn-success':'btn-default';?>">最近30天</button>
			</div>
			<div class="btn-group btn-group-sm" style="width: 180px;">
				<input type="text" id="daterange" style="text-align:center;" name="daterange" class="form-control input-sm" value="<?php echo strpos($range,'~')?$range:'';?>" placeholder="自定义日期范围" />
			</div>
		</div>
	</div>
	<hr style="margin:10px 0;"/>
	<div class="panel panel-default">
		<div class="panel-heading">
			<h3 class="panel-title">用户趋势</h3>
		</div>
		<div class="panel-body">
			<div id="main" style="height:400px"></div>
		</div>
	</div>
	<div class="page-header">
		<h4>详细数据
		<a href="{:U('Power/export',array('id'=>$id,'daterange'=>$_GET['daterange']))}" target="_blank" class="btn btn-link pull-right">导出Excel</a>
		</h4>
	</div>
	<table class="table table-striped table-hover">
 		<thead>
 			<tr>
				<th>日期</th>
                <th>参与人数</th>
                <th>答题人数</th>
 			
 				</tr>
 			</thead>
 		<tbody>
           </tbody>
		   <tfoot>
             <volist id="list" name="list">                
				<tr>
					<td>{$list.time|date='Y-m-d',###}</td>
					<td>{$list.viewnum}</td>
					<td>{$list.guessnum}</td>
				</tr>
			</volist>
		</tfoot> 			
 	</table>
</div>
</block>
<block name="js">
<script src="{:STATICS}/js/moment.min.js"></script>
<script src="{:STATICS}/daterangepicker/daterangepicker.js"></script>
 <!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/echarts-plain.js"></script>
<script type="text/javascript">
	// 基于准备好的dom，初始化echarts图表
	var chart1 = echarts.init(document.getElementById('main'));
	
	var option = {
		tooltip: {
			show: true
		},
		toolbox: {
			show : true,
			feature : {
				mark : {show: false},
				dataView : {show: false, readOnly: false},
				magicType : {show: true, type: ['line', 'bar']},
				restore : {show: true},
				saveAsImage : {show: true}
			}
		},
		legend: {
			data:['参与人数','点击答题人数']
		},
		xAxis : [
			{
				type : 'category',
				data : {$name}
			}
		],
		yAxis : [
			{
				type : 'value'
			}
		],
		series : [
			{
				"name":"参与人数",
				"type":"line",
				"data":{$followNum}
			},
			{
				"name":"点击答题人数",
				"type":"line",
				"data":{$unfollowNum}
			},
			
		]
	};
	
	
	// 为echarts对象加载数据 
	chart1.setOption(option);
	
	//chart3.setOption(canvas3_option);
	var url = "{:U('Guess/tongji',array('id'=>$id))}";
	$(function(){
		$('#7days,#15days,#30days').click(function(){
			if(!$(this).hasClass('btn-success')){
				location.href = url+'?daterange='+$(this).attr('name');
			}
		});
	})
</script>
<script>
	var zh_CN = {
		applyLabel: '确定',
		cancelLabel: '取消',
		fromLabel: '从',
		toLabel: '至',
		weekLabel: 'W',
		customRangeLabel: '自定义',
		daysOfWeek: ['日','一','二','三','四','五','六'],
		monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
		firstDay: moment.localeData()._week.dow
	};
	$('#daterange').daterangepicker(
		{ 
			format: 'YYYY-MM-DD',
			startDate: moment().subtract(6, 'days'),
			endDate: moment(),
			separator: '~',
			locale: zh_CN,
			/*ranges: {
			   '今天': [moment(), moment()],
			   '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
			   '最近7天': [moment().subtract(6, 'days'), moment()],
			   '最近30天': [moment().subtract(29, 'days'), moment()],
			   '本月': [moment().startOf('month'), moment().endOf('month')],
			   '上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
			},*/
		},
		function(start, end, label) {
			var range = start.format('YYYY-MM-DD') + ' ~ ' + end.format('YYYY-MM-DD')
			$('#dateRange').val(range);
			location.href = url+'?daterange='+range;
			
		}
	);
</script>
</block>